<style scoped>
.split {
  height: calc(100vh - 140px);
  background: #ffffff;
  border: 1px solid #dcdee2;
}

.split-pane {
  padding: 10px;
}
</style>
<template>
  <div class="split">
    <Split v-model="split1">
      <div slot="left" class="split-pane">
        <Card style="margin-bottom: 1px">
          字典类别
          <Button type="primary" style="margin-left: 10px" @click="AddDataType" icon="md-add">新增</Button>
          <Button type="primary" style="margin-left: 10px" @click="handleClearCurrentRow" icon="md-search">刷新</Button>
        </Card>
        <Table ref="tableType" highlight-row style="margin-bottom: 10px" border :loading="loadingTableType" :columns="tableTitleType"
          size="small" :data="tableDataType" :height="tableHeight" @on-current-change="typeChange"></Table>

        <Modal :width="500" draggable sticky v-model="modalType" :title="tempType.Id > 0 ? '修改' : '新增'"
          :mask-closable="false">
          <Form style="padding-right: 30px" ref="formValidate" :model="tempType" :label-width="80">
            <FormItem label="类别名称" prop="Name">
              <Input v-model="tempType.Name" />
            </FormItem>
            <FormItem label="类别编码" prop="Code">
              <Input v-model="tempType.Code" />
            </FormItem>

            <FormItem label="排序" prop="Sort">
              <Input v-model="tempType.Sort" type="number" />
            </FormItem>
          </Form>
          <div slot="footer">
            <Button type="text" @click="modalType = false">取消</Button>
            <Button type="primary" :loading="loading" @click="SaveDicType">确定</Button>
          </div>
        </Modal>
      </div>
      <div slot="right" class="split-pane">
        <Card style="margin-bottom: 1px">
          字典数据
          <Button type="primary" style="margin-left: 10px" @click="AddData" icon="md-add">新增</Button>
           <Button type="primary" style="margin-left: 10px" @click="SearchDicData" icon="md-search">刷新</Button>
        </Card>
        <Table ref="table" style="margin-bottom: 10px" border :loading="loadingTable" :columns="tableTitle"  size="small"
          :data="tableData" :height="tableHeight"></Table>

        <Modal :width="500" draggable sticky v-model="modalData" :title="tempData.Id > 0 ? '修改' : '新增'"
          :mask-closable="false">
          <Form style="padding-right: 30px" :model="tempData" :label-width="80">
            <FormItem label="字典类别" prop="Title">
             <Select v-model="tempData.TypeCode">
              <Option v-for="item in tableDataType" :value="item.Code" :key="item.Code">{{ item.Name }}</Option>
            </Select>
            </FormItem>
            <FormItem label="标题" prop="Title">
              <Input v-model="tempData.Title" />
            </FormItem>
            <FormItem label="编码" prop="Code">
              <Input v-model="tempData.Code" />
            </FormItem>
            <FormItem label="数字编码" prop="Value">
              <Input v-model="tempData.Value" type="number" />
            </FormItem>
            <FormItem label="排序" prop="Sort">
              <Input v-model="tempData.Sort" type="number" />
            </FormItem>
          </Form>
          <div slot="footer">
            <Button type="text" @click="modalData = false">取消</Button>
            <Button type="primary" :loading="loading" @click="SaveDicData">确定</Button>
          </div>
        </Modal>

      </div>
    </Split>
  </div>
</template>

<script>

import {
  GetDicType,
  SaveDicType,
  DeleteDicType,
  SearchDicData,
  SaveDicData,
  DeleteDicData
} from '@/api/system'
export default {
  name: 'sysdic',
  data () {
    return {
      split1: 0.4,

      tableHeight: 450,

      loading: false,
      loadingTable: false,
      loadingTableType: false,
      tempData: {

      },
      tempType: {

      },
      modalData: false,
      modalType: false,
      tableTitle: [
        {
          type: 'index',
          title: '序号',
          align: 'center',
          width: 60

        },
        {
          title: '操作',
          align: 'center',
          width: 150,
          fixed: 'right',
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      var vm = this
                      vm.tempData = params.row
                      vm.modalData = true
                    }
                  }
                },
                '修改'
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      var vm = this
                      vm.DeleteDicData(params.row.Id)
                    }
                  }
                },
                '删除'
              )

            ])
          }
        },
        {
          key: 'TypeName',
          title: '分类',
          minWidth: 120,
          align: 'center'
        },
        {
          key: 'Title',
          title: '标题',
          minWidth: 120,
          align: 'center'
        },
        {
          key: 'Code',
          title: 'Code',
          minWidth: 120,
          align: 'center'
        },

        {
          key: 'Value',
          title: 'Value',
          minWidth: 120,
          align: 'center'
        }

      ],
      tableTitleType: [
        {
          type: 'index',
          title: '序号',
          align: 'center',
          width: 60

        },
        {
          title: '操作',
          align: 'center',
          width: 150,
          fixed: 'right',
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      var vm = this
                      vm.tempType = params.row
                      vm.modalType = true
                    }
                  }
                },
                '修改'
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      var vm = this
                      vm.DeleteDicType(params.row.Id)
                    }
                  }
                },
                '删除'
              )

            ])
          }
        },

        {
          key: 'Name',
          title: '类别名称',
          minWidth: 120,
          align: 'center'
        },
        {
          key: 'Code',
          title: '类别编码',
          minWidth: 120,
          align: 'center'
        }

      ],
      tableData: [],
      tableDataType: [],
      tempTypeCode: ''

    }
  },
  computed: {},
  methods: {
    handleClearCurrentRow () {
      this.$refs.tableType.clearCurrentRow()
      this.SearchDicData()
    },
    typeChange (row, oldrow) {
      if (row) {
        this.tempTypeCode = row.Code
      } else {
        this.tempTypeCode = ''
      }

      this.SearchDicData()
    },
    GetDicType () {
      this.loadingTableType = true
      GetDicType().then((res) => {
        this.loadingTableType = false
        if (res.StatusCode == 200) {
          this.tableDataType = res.Data
        } else {
          vm.$Notice.error({
            title: data.Errors
          })
        }
      })
    },
    SaveDicData () {
      let vm = this
      SaveDicData(vm.tempData).then((res) => {
        vm.loading = false
        if (res.StatusCode == 200) {
          vm.modalData = false
          vm.$Message.success({ title: '提示', content: '保存成功' })
          vm.SearchDicData()
        } else {
          vm.$Message.error({ title: '提示', content: data.Errors })
        }
      })
    },
    SaveDicType () {
      let vm = this
      vm.loading = true
      SaveDicType(vm.tempType).then((res) => {
        vm.loading = false
        if (res.StatusCode == 200) {
          vm.modalType = false
          vm.$Message.success({ title: '提示', content: '保存成功' })
          vm.GetDicType()
        } else {
          vm.$Message.error({ title: '提示', content: data.Errors })
        }
      })
    },
    SearchDicData () {
      let vm = this
      vm.loadingTable = true
      var reqData = []
      if (vm.tempTypeCode) {
        reqData.push(vm.tempTypeCode)
      }
      SearchDicData(reqData).then((res) => {
        vm.loadingTable = false
        if (res.StatusCode == 200) {
          vm.tableData = res.Data
        } else {
          vm.$Notice.error({
            title: data.Errors
          })
        }
      })
    },
    DeleteDicData (id) {
      this.$Modal.confirm({
        title: '提示',
        content: '确定要删除吗？',
        onOk: () => {
          DeleteDicData(id).then((res) => {
            if (res.StatusCode == 200) {
              this.SearchDicData()
              this.$Message.success({ title: '提示', content: '删除成功' })
            } else {
              this.$Message.error({ title: '提示', content: data.Errors })
            }
          })
        },
        onCancel: () => { }
      })
    },

    DeleteDicType (id) {
      this.$Modal.confirm({
        title: '提示',
        content: '确定要删除吗？',
        onOk: () => {
          DeleteDicType(id).then((res) => {
            if (res.StatusCode == 200) {
              this.GetDicType()
              this.$Message.success({ title: '提示', content: '删除成功' })
            } else {
              this.$Message.error({ title: '提示', content: data.Errors })
            }
          })
        },
        onCancel: () => { }
      })
    },

    AddData () {
      var vm = this
      vm.modalData = true
      vm.tempData = {
        TypeCode: vm.tempTypeCode
      }
    },
    AddDataType () {
      var vm = this
      vm.modalType = true
      vm.tempType = {
        Name: '',
        Code: ''

      }
    }
  },

  mounted () {
    this.tableHeight = window.innerHeight - 240
    this.GetDicType()
    this.SearchDicData()
  }
}
</script>
